<template>
    <div class="shopcar-container">

        <!--商品数量区域-->
        <div class="shop-list">
            <div class="mui-card" v-for="(item, i) in shoplist" :key="item.id">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">

                        <mt-switch v-model="$store.getters.getGoodsSelected[item.id]"
                        @change="selectedChanged(item.id, $store.getters.getGoodsSelected[item.id])"
                        >
                        </mt-switch>
                        <img :src="item.thumb_path" alt="">
                        <div class="info">
                            <h1>{{ item.title }}</h1>
                            <div>
                                <span class="fc-red">￥{{ item.sell_price}}</span> <numbox :initCount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                                <a href="###" @click.prevent="remove(item.id, i)">删除</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>


        <!--商品区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner jiesuan">
                    <div class="left">
                        <p>总计（不含运费）</p>
                        <p>已勾选商品 <span class="fc-red fb">{{ $store.getters.getGoodsCountAndAmount.count }}</span> 件， 总价 <span class="fc-red fb">￥{{ $store.getters.getGoodsCountAndAmount.amount }}</span> 元</p>
                    </div>
                    <mt-button type="danger">去结算</mt-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import numbox from '../../components/numbox/shopcar_numbox'

    export default {
        name: "shopCar",
        data(){
            return {
                shoplist: []
            }
        },
        created(){
            this.getShopList();
        },
        methods:{
            getShopList(){

                // 从store中获取购物车中商品信息
                var idArr = [];
                this.$store.state.car.forEach(item=>idArr.push(item.id));

                if(idArr.length <= 0){
                    return;
                }

                this.$axios.get('/api/goods/getshopcarlist/'+ idArr.join(",")).then(res => {
                    if(res.data.status === 0){
                        this.shoplist = res.data.message;
                    }
                });


            },
            remove(goodsid, index){
                // 删除列表中的数据
                this.shoplist.splice(index,1);

                // 删除store中的数据
                this.$store.commit("removeGoodsInfo", goodsid);
            },
            selectedChanged(goodsId, goodsStatus){
                console.log(goodsId+"-----"+goodsStatus);

                this.$store.commit("updateGoodsSelectedStatus", {id: goodsId, selected: goodsStatus});

            }
        },
        components:{
            numbox
        }
    }
</script>

<style lang="scss" scoped>

</style>
